<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--相对定位，
 相对于自己原来的位置进行偏移
 -->


  <style>
      body{
          padding: 20px;
      }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px solid #e58f4a;
    }
    #first{
      border: 10px solid #e78f4a;
      background: #a24fff;
      position: relative; /*相对定位：上下左右*/
        top: -20px; /*上边距-20*/
        left: 20px; /*左边距+20*/
        right: 20px; /*右边距+20*/
    }

    #second{
      border: 10px solid #a24fff;
        background: #80D0C7;
        position: relative;
        bottom: 20px; /*下边距+20*/
    }

    #third{
      border: 10px solid #0093E9;
        background: #3748ff;
        position: relative;
        right: -20px; /*右边距-20*/
    }


  </style>

</head>
<body>
<div id="father">

  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>

</div>

</body>
</html>